<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>专业简历 - 张明</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }
        .skill-bar {
            transition: width 1.5s ease;
        }
        .timeline-dot {
            animation: pulse 2s infinite;
        }
        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
            }
            70% {
                box-shadow: 0 0 0 10px rgba(102, 126, 234, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
            }
        }
        .section-title {
            position: relative;
            display: inline-block;
        }
        .section-title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 0;
            width: 60px;
            height: 4px;
            background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
            border-radius: 2px;
        }
        .mermaid {
            display: flex;
            justify-content: center;
            margin: 2rem 0;
        }
    </style>
</head>
<body>
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20">
        <div class="container mx-auto px-6">
            <div class="text-center">
                <h1 class="text-5xl md:text-6xl font-bold mb-4" style="font-family: 'Noto Serif SC', serif;">
                    张明
                </h1>
                <p class="text-xl md:text-2xl mb-6 opacity-90">高级软件工程师</p>
                <div class="flex justify-center space-x-6 text-lg">
                    <span><i class="fas fa-phone mr-2"></i>138-0000-0000</span>
                    <span><i class="fas fa-envelope mr-2"></i>zhangming@email.com</span>
                    <span><i class="fas fa-map-marker-alt mr-2"></i>北京</span>
                </div>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <div class="container mx-auto px-6 py-12">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- Left Column -->
            <div class="lg:col-span-2 space-y-8">
                <!-- Professional Summary -->
                <div class="bg-white rounded-xl shadow-lg p-8 card-hover">
                    <h2 class="text-3xl font-bold mb-6 section-title">
                        <i class="fas fa-user-tie mr-3 text-purple-600"></i>职业概述
                    </h2>
                    <p class="text-gray-700 leading-relaxed text-lg mt-8">
                        拥有5年以上全栈开发经验的高级软件工程师，专注于构建高性能、可扩展的企业级应用。
                        精通现代前端框架和后端技术栈，具备优秀的系统架构设计能力和团队协作精神。
                        致力于通过技术创新推动业务增长，曾主导多个核心项目的技术架构设计与实施。
                    </p>
                </div>

                <!-- Work Experience -->
                <div class="bg-white rounded-xl shadow-lg p-8 card-hover">
                    <h2 class="text-3xl font-bold mb-6 section-title">
                        <i class="fas fa-briefcase mr-3 text-purple-600"></i>工作经历
                    </h2>
                    <div class="mt-8 space-y-8">
                        <div class="relative pl-8 border-l-4 border-purple-400">
                            <div class="absolute -left-3 top-0 w-6 h-6 bg-purple-600 rounded-full timeline-dot"></div>
                            <h3 class="text-xl font-bold text-gray-800">高级软件工程师</h3>
                            <p class="text-purple-600 font-medium">科技创新有限公司 | 2021.03 - 至今</p>
                            <ul class="mt-3 space-y-2 text-gray-700">
                                <li><i class="fas fa-check-circle text-green-500 mr-2"></i>主导公司核心产品的技术架构升级，性能提升300%</li>
                                <li><i class="fas fa-check-circle text-green-500 mr-2"></i>带领8人团队完成微服务架构转型</li>
                                <li><i class="fas fa-check-circle text-green-500 mr-2"></i>建立前端工程化体系，开发效率提升50%</li>
                            </ul>
                        </div>
                        <div class="relative pl-8 border-l-4 border-purple-400">
                            <div class="absolute -left-3 top-0 w-6 h-6 bg-purple-600 rounded-full timeline-dot"></div>
                            <h3 class="text-xl font-bold text-gray-800">全栈开发工程师</h3>
                            <p class="text-purple-600 font-medium">互联网科技公司 | 2019.07 - 2021.02</p>
                            <ul class="mt-3 space-y-2 text-gray-700">
                                <li><i class="fas fa-check-circle text-green-500 mr-2"></i>独立负责电商平台前后端开发</li>
                                <li><i class="fas fa-check-circle text-green-500 mr-2"></i>优化数据库查询，响应时间减少60%</li>
                                <li><i class="fas fa-check-circle text-green-500 mr-2"></i>实现自动化部署流程，部署效率提升80%</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- Project Showcase -->
                <div class="bg-white rounded-xl shadow-lg p-8 card-hover">
                    <h2 class="text-3xl font-bold mb-6 section-title">
                        <i class="fas fa-project-diagram mr-3 text-purple-600"></i>项目展示
                    </h2>
                    <div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="bg-gradient-to-br from-purple-50 to-pink-50 p-6 rounded-lg">
                            <h3 class="text-xl font-bold text-gray-800 mb-2">企业级SaaS平台</h3>
                            <p class="text-gray-600 mb-3">基于微服务架构的多租户SaaS解决方案</p>
                            <div class="flex flex-wrap gap-2">
                                <span class="px-3 py-1 bg-purple-200 text-purple-800 rounded-full text-sm">React</span>
                                <span class="px-3 py-1 bg-purple-200 text-purple-800 rounded-full text-sm">Node.js</span>
                                <span class="px-3 py-1 bg-purple-200 text-purple-800 rounded-full text-sm">MongoDB</span>
                            </div>
                        </div>
                        <div class="bg-gradient-to-br from-blue-50 to-green-50 p-6 rounded-lg">
                            <h3 class="text-xl font-bold text-gray-800 mb-2">智能数据分析系统</h3>
                            <p class="text-gray-600 mb-3">AI驱动的商业智能分析平台</p>
                            <div class="flex flex-wrap gap-2">
                                <span class="px-3 py-1 bg-blue-200 text-blue-800 rounded-full text-sm">Python</span>
                                <span class="px-3 py-1 bg-blue-200 text-blue-800 rounded-full text-sm">TensorFlow</span>
                                <span class="px-3 py-1 bg-blue-200 text-blue-800 rounded-full text-sm">Vue.js</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right Column -->
            <div class="space-y-8">
                <!-- Skills -->
                <div class="bg-white rounded-xl shadow-lg p-8 card-hover">
                    <h2 class="text-2xl font-bold mb-6 section-title">
                        <i class="fas fa-code mr-3 text-purple-600"></i>技术栈
                    </h2>
                    <div class="mt-8 space-y-4">
                        <div>
                            <div class="flex justify-between mb-2">
                                <span class="font-medium">JavaScript/TypeScript</span>
                                <span class="text-purple-600">95%</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-3">
                                <div class="skill-bar bg-gradient-to-r from-purple-500 to-pink-500 h-3 rounded-full" style="width: 95%"></div>
                            </div>
                        </div>
                        <div>
                            <div class="flex justify-between mb-2">
                                <span class="font-medium">React/Vue</span>
                                <span class="text-purple-600">90%</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-3">
                                <div class="skill-bar bg-gradient-to-r from-purple-500 to-pink-500 h-3 rounded-full" style="width: 90%"></div>
                            </div>
                        </div>
                        <div>
                            <div class="flex justify-between mb-2">
                                <span class="font-medium">Node.js/Express</span>
                                <span class="text-purple-600">85%</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-3">
                                <div class="skill-bar bg-gradient-to-r from-purple-500 to-pink-500 h-3 rounded-full" style="width: 85%"></div>
                            </div>
                        </div>
                        <div>
                            <div class="flex justify-between mb-2">
                                <span class="font-medium">数据库设计</span>
                                <span class="text-purple-600">80%</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-3">
                                <div class="skill-bar bg-gradient-to-r from-purple-500 to-pink-500 h-3 rounded-full" style="width: 80%"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Education -->
                <div class="bg-white rounded-xl shadow-lg p-8 card-hover">
                    <h2 class="text-2xl font-bold mb-6 section-title">
                        <i class="fas fa-graduation-cap mr-3 text-purple-600"></i>教育背景
                    </h2>
                    <div class="mt-8">
                        <h3 class="text-xl font-bold text-gray-800">计算机科学与技术</h3>
                        <p class="text-purple-600 font-medium">北京大学 | 本科</p>
                        <p class="text-gray-600 mt-2">2015.09 - 2019.06</p>
                        <div class="mt-4 space-y-2">
                            <p class="text-gray-700"><i class="fas fa-award text-yellow-500 mr-2"></i>优秀毕业生</p>
                            <p class="text-gray-700"><i class="fas fa-trophy text-yellow-500 mr-2"></i>ACM程序设计竞赛一等奖</p>
                        </div>
                    </div>
                </div>

                <!-- Certifications -->
                <div class="bg-white rounded-xl shadow-lg p-8 card-hover">
                    <h2 class="text-2xl font-bold mb-6 section-title">
                        <i class="fas fa-certificate mr-3 text-purple-600"></i>认证资质
                    </h2>
                    <div class="mt-8 space-y-3">
                        <div class="flex items-center">
                            <i class="fas fa-check-double text-green-500 mr-3"></i>
                            <span>AWS认证解决方案架构师</span>
                        </div>
                        <div class="flex items-center">
                            <i class="fas fa-check-double text-green-500 mr-3"></i>
                            <span>PMP项目管理专业人士</span>
                        </div>
                        <div class="flex items-center">
                            <i class="fas fa-check-double text-green-500 mr-3"></i>
                            <span>阿里云认证专家</span>
                        </div>
                    </div>
                </div>
            </div>
        